<template>
    <div class="searchResultContainer">
        <div class="searchBox ">
            <el-input
                placeholder="请输入关键字"
                suffix-icon="el-icon-search"
                v-model="searchValue">
            </el-input>
            <el-button type="primary" class="query">查询</el-button>
        </div>
        
        <div class="searchResult">
            <el-tabs v-model="activeName" @tab-click="handleClick" v-if="showTab">
                <el-tab-pane :label="list[0]" name="0">{{list[0]}}</el-tab-pane>
                <el-tab-pane :label="list[1]" name="1">{{list[1]}}</el-tab-pane>
                <el-tab-pane :label="list[2]" name="2">{{list[2]}}</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
export default {
    name: 'SearchResult',
    data () {
        return {
            searchValue:'',
            activeName: '1',
            list:['政策法规','功能菜单','单据信息'],
            showTab:false,
        };
    },
    created(){
        let url = window.location.href;
        this.searchValue = appUtil.getParamFromUrl(url,'r');
        let that = this;
        setTimeout(function(){
            that.showTab = true;
        },100);
        
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
};
</script>

<style lang="scss" scoped>
.searchResultContainer{
    background: #fff;
    height: 100vh;
    .searchBox{
        width: 672px;
        margin: auto;
        padding-top: 40px;
         .el-input{
            width: 600px;
        }
    }
    .query{
        margin-left: 16px;
    }
    .searchResult{
         .el-tabs__nav-wrap{
            padding: 0;
        }
         .el-tabs__nav-scroll{
            width: 672px;
            margin: 10px auto 0;
        }
         .el-tabs__content{
            width: 672px;
            margin: auto ;
        }
    }
}

</style>
